<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String contextPath = request.getContextPath();
%> 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마이페이지</title>
<style type="text/css">
	#wrap_detail{
		width: 700px;
		text-align: left;
		margin-left: 100px;
		margin: 0;
		color: #696969;
		line-height: normal;
		font-style: normal;
		font-family: Verdana;
		font-size: 12px;
		margin-bottom: 80px;
	}
	#title_img{
		margin-top: 100px;
		position: relative;
	}
	.my_btn{
		width:130px;
		height:30px;
		margin-right:10px;
		background-color: #2F4F4F;
		font-family: "맑은 고딕";
		font-size:9pt;
		color:white;
		border: 0;
	}
	#list ul{
		overflow: auto;
		padding: 0;
	}
	#list li{
		float:left;
		list-style:none;
	}
	#my_main_member_buylist{
		float: left;
		width: 600px;
		margin-top: 30px;
	}
	#mypage_list_tab{
		width:600px;
	}
	#mypage_list_tab h2{
		float: left;
	}
	#board_type_list_2{
		width: 700px;
		margin-top: 8px;
	}
	#board_type_list_2 th{
		text-align:center;
		height: 30px;
	}
	#board_type_list_2 td{
		border-bottom:1px solid #d3ccbe; 
		padding:10px 0; 
		font-size:11px;
		text-align: center;
	}
	#alt{
		background:#f5f5f5;
		text-align:center; 
		padding:10px 0 10px 0; 
		border-top:1px solid #e0e0e0;
	}
	#guideline span{
		color: #ADABAB;
		font-weight: bold;
		cursor: pointer;
	}
</style>
<script type="text/javascript">
	function searchList(selectedId){
		
		var total = document.getElementById('mileageTotal');
		var plus = document.getElementById('mileagePlus');
		var use = document.getElementById('mileageUse');
		var add = document.getElementById('mileageAdd');
		
		if(selectedId=='mileageTotal'){
			
			total.style.display="block";
			document.getElementById('guideTotal').style.color="#494949";
			
			plus.style.display="none"; 
			document.getElementById('guidePlus').style.color="#ADABAB";
			
			use.style.display="none"; 
			document.getElementById('guideUse').style.color="#ADABAB";
			
			add.style.display="none";
			document.getElementById('guideAdd').style.color="#ADABAB";
			
			
		} else if(selectedId =='mileagePlus'){
			
			total.style.display="none";
			document.getElementById('guideTotal').style.color="#ADABAB";
			
			plus.style.display="block"; 
			document.getElementById('guidePlus').style.color="#494949";
			
			use.style.display="none";
			document.getElementById('guideUse').style.color="#ADABAB";
			
			add.style.display="none";
			document.getElementById('guideAdd').style.color="#ADABAB";
			
		} else if(selectedId == 'mileageUse'){
			
			total.style.display="none"; 
			document.getElementById('guideTotal').style.color="#ADABAB";
			
			plus.style.display="none"; 
			document.getElementById('guidePlus').style.color="#ADABAB";
			
			use.style.display="block"; 
			document.getElementById('guideUse').style.color="#494949";
			
			add.style.display="none";
			document.getElementById('guideAdd').style.color="#ADABAB";
			
		} else if(selectedId == 'mileageAdd'){
			
			total.style.display="none"; 
			document.getElementById('guideTotal').style.color="#ADABAB";
			
			plus.style.display="none"; 
			document.getElementById('guidePlus').style.color="#ADABAB";
			
			use.style.display="none"; 
			document.getElementById('guideUse').style.color="#ADABAB";
			
			add.style.display="block";
			document.getElementById('guideAdd').style.color="#494949";
		}
		
	}
	
</script>
</head>
<body>
<div id="wrap_detail">
	<div id="title_img">
		<img src="./images/member/title_mypage_3.png">
	</div>
	<p style="height: 10px"></p>
	<div id="list">
		<ul id="mypage_list_tab">
			<li>
				<form action="<%=contextPath %>/detail.do" method="post">
					<input type="hidden" name="email" value="${email}">
					<input type="submit" value="멤버십 정보" class="my_btn" style="cursor: pointer">
				</form>
			</li>
			<li>
				<form action="<%=contextPath %>/updateForm.do" method="post">
					<input type="hidden" name="email" value="${email}">
					<input type="submit" value="개인정보변경" class="my_btn" style="cursor: pointer">
				</form>
			</li>
			<li>
				<form action="<%=contextPath %>/serviceList.do" method="post">
					<input type="hidden" name="email" value="${email}">
					<input type="submit" value="문의 내역" class="my_btn" style="cursor: pointer">
				</form>
			</li>
			<li>
				<form action="<%=contextPath %>/delete.do" method="post">
					<input type="hidden" name="email" value="${email}">
					<input type="submit" value="회원 탈퇴" class="my_btn" style="cursor: pointer">
				</form>
			</li>
		</ul>
	</div>
	<p style="height: 15px"></p>
	<div>
		<table style="width: 700px">
			<tr>
				<td height="30px">
					<img src="./images/member/subtitle_member_info_2.jpg">
				</td>
				<td>
					<img src="./images/member/subtitle_membership.png">
				</td>
			</tr>
			<tr height="200px" style=" text-align:center;">
				<td>
					<table><tr><td style="border: 1px solid rgba(173,171,171,.2); width: 300px; height: 200px;">
						<c:if test="${item != null}">
							<img src="images/item/item${item.item_num}.jpg" width="45%"><br><br>
							<span style="font-weight: bold;">${item.item_name}</span>
						</c:if>
						<c:if test="${item == null}">
							선호 음료가 없습니다.
						</c:if>
					</td></tr></table>	
				</td>
				<td>
					<table><tr><td style="border: 1px solid rgba(173,171,171,.2); width: 300px; height: 200px;">
						<img src="images/card.jpg" width="50%"><br><br>
						현재 <span style="font-weight: bold;">${memberCommand.name}</span> 님의<br>
						보유 마일리지 :  
						<span style="font-weight: bold; font-size:13pt; color:#8c0c04">
							${remainMileage}
						</span> point
					</td></tr></table>
				</td>
			</tr>
		</table>
	</div>
	<p style="height: 15px"></p>
		<h2><img src="./images/member/subtitle_member_info_4.jpg"></h2>
		&nbsp;(최근 10건의 마일리지 적립 및 구매 내역만 조회 가능합니다.)
		<div style="text-align: right; margin-top: 2px; font-weight: bold;" id="guideline">
			<span id="guideTotal" onclick="searchList('mileageTotal')" 
				  style="color:#494949;">전체내역</span> |
			<span id="guidePlus" onclick="searchList('mileagePlus')"
			      style="color: #ADABAB;">적립내역</span> |
			<span id="guideUse" onclick="searchList('mileageUse')" 
			      style="color: #ADABAB;">사용내역</span> |
			<span id="guideAdd" onclick="searchList('mileageAdd')" 
			      style="color: #ADABAB;">적립예정내역</span>
		</div>
		
		<!-- 전체 목록 -->
		<div id="mileageTotal" style="display: block;">
		<table id="board_type_list_2" style="margin-top: 2px;">
			<tbody>
				<tr style="background:#ADABAB; background:rgba(173,171,171,.2);">
					<th width="50px">NO</th>
					<th width="80px">구분</th>
					<th width="150px">날짜</th>
					<th>내역</th>
					<th width="150px">마일리지 포인트</th>
				</tr>
				<c:if test="${totalSize<1}">
					<tr>
						<td colspan="5">마일리지  내역이 없습니다.</td>
					</tr>
				</c:if>
				<c:if test="${totalSize >= 1 }">
					<c:set var="i" value="1"/>
						<c:forEach var="mileage" items="${mileageList}">
							<tr>
								<td>${i}</td>
								<td>${mileage.mile_type}</td>
								<td>${mileage.mile_date}</td>
								<td>${mileage.mile_group}</td>
								<c:if test="${mileage.mile_type == '적립'}">
									<td>${mileage.mile_point} point</td>
								</c:if>
								<c:if test="${mileage.mile_type == '사용'}">
									<td>- ${mileage.mile_point} point</td>
								</c:if>
								<c:if test="${mileage.mile_type == '적립예정'}">
									<td>(${mileage.mile_point} point)</td>
								</c:if>
							</tr>
							<c:set var="i" value="${i+1}"/>
						</c:forEach>
				</c:if>
			</tbody>
		</table>
		</div>
		
		<!-- 적립 목록 -->
		<div id="mileagePlus" style="display: none;">
		<table id="board_type_list_2" style="margin-top: 2px;">
			<tbody>
				<tr style="background:#ADABAB; background:rgba(173,171,171,.2);">
					<th width="50px">NO</th>
					<th width="80px">구분</th>
					<th width="150px">날짜</th>
					<th>내역</th>
					<th width="150px">마일리지 포인트</th>
				</tr>
				<c:if test="${plusSize<1}">
					<tr>
						<td colspan="5">마일리지 적립 내역이 없습니다.</td>
					</tr>
				</c:if>
				<c:if test="${plusSize >= 1 }">
					<c:set var="i" value="1"/>
						<c:forEach var="plusMileage" items="${plusMileageList}">
							<tr>
								<td>${i}</td>
								<td>${plusMileage.mile_type}</td>
								<td>${plusMileage.mile_date}</td>
								<td>${plusMileage.mile_group}</td>
								<td>${plusMileage.mile_point} point</td>
							</tr>
							<c:set var="i" value="${i+1}"/>
						</c:forEach>
				</c:if>
			</tbody>
		</table>
		</div>
		
		<!-- 사용 목록 -->
		<div id="mileageUse" style="display: none;">
		<table id="board_type_list_2" style="margin-top: 2px;">
			<tbody>
				<tr style="background:#ADABAB; background:rgba(173,171,171,.2);">
					<th width="50px">NO</th>
					<th width="80px">구분</th>
					<th width="150px">날짜</th>
					<th>내역</th>
					<th width="150px">마일리지 포인트</th>
				</tr>
				<c:if test="${useSize< 1}">
					<tr>
						<td colspan="5">마일리지 사용 내역이 없습니다.</td>
					</tr>
				</c:if>
				<c:if test="${useSize >= 1 }">
					<c:set var="i" value="1"/>
						<c:forEach var="useMileage" items="${useMileageList}">
							<tr>
								<td>${i}</td>
								<td>${useMileage.mile_type}</td>
								<td>${useMileage.mile_date}</td>
								<td>${useMileage.mile_group}</td>
								<td>- ${useMileage.mile_point} point</td>
							</tr>
							<c:set var="i" value="${i+1}"/>
						</c:forEach>
				</c:if>
			</tbody>
		</table>
		</div>
		
		<!-- 적립예정목록 -->
		<div id="mileageAdd" style="display: none;">
		<table id="board_type_list_2" style="margin-top: 2px;">
			<tbody>
				<tr style="background:#ADABAB; background:rgba(173,171,171,.2);">
					<th width="50px">NO</th>
					<th width="80px">구분</th>
					<th width="150px">날짜</th>
					<th>내역</th>
					<th width="150px">마일리지 포인트</th>
				</tr>
				<c:if test="${addSize<1}">
					<tr>
						<td colspan="5">마일리지 적립예정 내역이 없습니다.</td>
					</tr>
				</c:if>
				<c:if test="${addSize >= 1 }">
					<c:set var="i" value="1"/>
						<c:forEach var="addMileage" items="${addMileageList}">
							<tr>
								<td>${i}</td>
								<td>${addMileage.mile_type}</td>
								<td>${addMileage.mile_date}</td>
								<td>${addMileage.mile_group}</td>
								<td>(${addMileage.mile_point} point)</td>
							</tr>
							<c:set var="i" value="${i+1}"/>
						</c:forEach>
				</c:if>
			</tbody>
		</table>
		</div>
		
	<p style="height: 30px"></p>
	<div>
		<h2><img src="./images/member/subtitle_member_info_1.jpg"></h2>
		&nbsp;(최근 5건의 구매 내역만 조회 가능합니다.)
		<table id="board_type_list_2">
			<tbody>
				<tr style="background:#ADABAB; background:rgba(173,171,171,.2);">
					<th width="50px">NO</th>
					<th width="120px">구매 날짜</th>
					<th>구매 상품</th>
					<th>구매 총액</th>
				</tr>
				<c:if test="${size<1}">
					<tr>
						<td colspan="4"><p>최근 구매내역이 없습니다.</p></td>
					</tr>
				</c:if>
				<c:if test="${size>=1}">
					<c:forEach var="i" begin="0" end="${size-1}" step="1">
						<tr>
							<td>${i+1}</td>
							<td>${purchaseList[i].pur_date}</td>
							<td>${itemNameList[i]} 
								<c:if test="${countList[i] > 0}">
									외 ${countList[i] -1} 건
								</c:if>
							</td>
							<td>${purchaseList[i].pur_total}&nbsp;원</td>
						</tr>
					</c:forEach>
				</c:if>
			</tbody>
		</table>
	</div>
	<p style="height: 30px"></p>
	<div>
		<h2><img src="./images/member/subtitle_member_info_3.jpg"></h2>
		&nbsp;(최근 3건의 예약 내역만 조회 가능합니다.)
		<table id="board_type_list_2">
			<tbody>
				<tr style="background:#ADABAB; background:rgba(173,171,171,.2);">
					<th width="50px">NO</th>
					<th width="200px">예약 장소</th>
					<th width="200px">예약 시간</th>
					<th>방문 인원</th>
					<th>음료 주문 건수</th>
					<th>총 금액</th>
				</tr>
				<c:if test="${reservationSize<1}">
					<tr>
						<td colspan="6"><p>최근 예약내역이 없습니다.</p></td>
					</tr>
				</c:if>
				<c:if test="${reservationSize>=1}">
					<c:forEach var="i" begin="0" end="${reservationSize-1}" step="1">
						<tr>
							<td>${i+1}</td>
							<c:if test="${reservationList[i].branch_num ==1}">
								<td>강남점 세미나룸 NO.${reservationList[i].seminar_num}</td>
							</c:if>
							<c:if test="${reservationList[i].branch_num ==2}">
								<td>여의도점 NO.${(reservationList[i].seminar_num) - 3}</td>
							</c:if>
							<td>
								${reservationList[i].ask_date} ${reservationList[i].ask_time}
							</td>
							<td>
								${reservationList[i].visitor_num}명 
								<c:if test="${reservationList[i].seminar_num == 1 || reservationList[i].seminar_num == 4}">
									(최대 6명)
								</c:if>
								<c:if test="${reservationList[i].seminar_num == 2 || reservationList[i].seminar_num == 5}">
									(최대 8명)
								</c:if>
								<c:if test="${reservationList[i].seminar_num == 3 || reservationList[i].seminar_num == 6}">
									(최대 10명)
								</c:if>
							</td>
							<td>
								${menuSizeList[i]} 건
							</td>
							<td>${reservationList[i].payment}</td>
						</tr>
					</c:forEach>
				</c:if>
			</tbody>
		</table>
	</div>
</div>	
</body>
</html>